<template>
<div>
  <el-row :gutter="10" style="margin-bottom: 40px">
      <el-col :span="8">
        <el-card>
          <div style="color:#409EFF;"><i class="el-icon-user"></i>历史信访总数</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
           {{this.visitsCount}}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
       
      </el-col>
       <el-col :span="8">
        <el-card>
          <div style="color:#e6a23c;"><i class="el-icon-folder"></i> 历史结案总数</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
            {{this.finishCount}}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div style="color:#67c23a;"><i class="el-icon-folder-checked"></i> 历史归档总数</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
            {{this.filesCount}}
          </div>
          
        </el-card>
      </el-col>
     
  </el-row>
  <el-row>
      <el-col :span="12">
       <div id="main" :style="{width: '600px', height: '300px'}"></div>
      </el-col>

      <el-col :span="12">
      
   <div id="myChart" :style="{width: '600px', height: '300px'}"></div>
      </el-col>
    </el-row>
 <el-row>
      <el-col :span="24">
   <div>
       <el-table
    :data="tableData.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%" 
    height="200"
    highlight-current-row="true"
    >
   
    <el-table-column
      fixed
      prop="title"
      label="标题"
      width="180">
      <template slot-scope="scope">
        <div class="bule-font-color" @click="open(scope.row)"><font color="#409EFF">{{scope.row.title}}</font></div>
      </template>
    </el-table-column>
    <el-table-column
      prop="content"
      label="内容"
      width="250"
      :formatter="stateFormat"
      >
      
    </el-table-column>
    <el-table-column
      prop="documents"
      label="公告文件"
      width="350"
     
      >
      
    </el-table-column>
    <el-table-column
      prop="publisher"
      label="发布人"
      width="90">
    </el-table-column>
    <el-table-column
      prop="time"
      label="发布时间"
      width="150">
    </el-table-column>
    
    <el-table-column
    width="170"
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入标题关键字搜索"/>
      </template>
<template slot-scope="scope">
  <el-button 
  type="primary"
  size="mini"
  @click="edit(scope.row)">
  编辑</el-button>
    <el-popconfirm title="确定删除吗？" @confirm="remove(scope.row.id)">
							<el-button type="danger"  size="mini" slot="reference">删除</el-button>
          </el-popconfirm>
</template>
    </el-table-column>
    
  </el-table>
  <el-dialog
				title="备注"
				:visible.sync="dialogVisible"
				width="600px"
				:before-close="handleClose">
			<el-form :model="editForm" ref="editForm" label-width="80px" class="el-f">
     	<el-form-item label="ID" prop="id" label-width="100px">
					<el-input  style="width: 300px" v-model="editForm.id"  autocomplete="off"></el-input>
				</el-form-item>
       <el-form-item label="标题" prop="title" label-width="100px">
					<el-input style="width: 300px" v-model="editForm.title" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="content" label-width="100px">
					<el-input style="width: 300px" v-model="editForm.content" autocomplete="off"></el-input>
				</el-form-item>
        	<el-form-item label="文件" prop="documents" label-width="100px" >
					<el-input style="width: 300px" v-model="editForm.documents" autocomplete="off" v-if="false"></el-input>
    <el-upload
  class="upload-demo"
  action="http://127.0.0.1:8081/notice/update"
  ref="uploadFile1"
  :auto-upload="false"
  :data="editForm"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-change="handleChange"
  :http-request="uploadFile1"
  :on-exceed="handleExceed"
  :file-list="editForm.documents">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">上传公告文件，且不超过10M</div>
</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('editForm')" style="display:block;margin:0 160px">提交</el-button>
					
				</el-form-item>
			</el-form>
		</el-dialog>
   </div>
   </el-col>
   </el-row>
   </div>
</template>

<script>

	export default {
		name: "Index",
		components:{

		},
    
		data(){
    return{
              monthArrays:[],
              yearArrays:[],
               tableData: [{}],
               dialogVisible: false,
			       	 editForm: {
                      id:'',
                      title:'',
                        publisher:'',
                        content:'',
                        documents:''
                         },
               search: '',
               formDate:'',
               visitsCount:'',
               finishCount:'',
               filesCount:''
           }
        },
        methods:{
          getNoticeList(){
            this.$axios.get("/notice/list").then(res=>{
              this.tableData=res.data.data

            })
          },
          stateFormat(row, column, cellValue) {
      if (!cellValue) return ''
      if (cellValue.length > 10) {       //最长固定显示10个字符
        return cellValue.slice(0, 10) + '...'
      }
      return cellValue
    },
    edit(row){
        this.editForm.id=row.id
        this.editForm.title=row.title
        this.editForm.content=row.content
        this.dialogVisible=true     
    },
    submitForm(formName) {
       this.formDate = new FormData()
          this.$refs.uploadFile1.submit();
          this.formDate.append('id', this.editForm.id);
          this.formDate.append('title', this.editForm.title);
          this.formDate.append('content',this.editForm.content);
          let config = {
              headers: {
                  'Content-Type': 'multipart/form-data'
              }
          }
          this.$axios.post("/notice/update", this.formDate,config).then( res => {
              console.log(res)
          
              if(res.data.code == 200){
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                   onClose:() => {

								this.$refs.uploadFile1.clearFiles();
                

						}      
                });
                this.$refs.editForm.resetFields();
                 this.getNoticeList()
                  this.dialogVisible=false
              }else{
                this.$message.error(res.data.msg);
              }
          }).catch( res => {
              console.log(res)
          })
          },
     uploadFile1(file){
      this.formDate.append('file', file.file);
    },
     handleChange (file, fileList) {
      this.editForm.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.editForm.fileList = fileList;
    },
    handlePreview(file) {
     console.log(file)
    },
    remove(id){

     		this.$axios.post("/notice/delete/" + id).then(res => {
					this.$message({
						showClose: true,
						message: '恭喜你，操作成功',
						type: 'success',
						onClose:() => {
							this.getNoticeList()
						}
					});

				})
},drawPie(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        this.$axios.get('/file/monthtotle').then(res=>{
         res.data.data[0].forEach(item=>{
         option1.series[0].data.push(item)
         })
         res.data.data[1].forEach(item=>{
         option1.series[1].data.push(item)
         })
        
        console.log("这是0"+res.data.data[0])
        console.log("这是1"+res.data.data[1])
        myChart.setOption(option1);
      })
      
    },
  drawLine(){

let myChart1 = this.$echarts.init(document.getElementById('main'));

 this.$axios.get('/file/yeartotle').then(res=>{
        res.data.data.forEach(item => {
              option.series[0].data.push({name:item.name,value:item.value})
        });
       myChart1.setOption(option)
      })    
  },

     open(row) {
        this.$notify.success({
          title:row.title,
          message:row.content,
         type:"success",
          position: 'bottom-left'
        });
        },
  getTotle(){
      this.$axios.get('/file/totle').then(res=>{
      
        this.visitsCount=res.data.data[0];
        this.finishCount=res.data.data[1];
        this.filesCount=res.data.data[2];    

      })
        },
        getYearTotle(){
     
        },
        getMonthTotle(){
        
        }
        },
      

  mounted(){
    this.drawLine();
    this.drawPie();
  },
      
      
      created(){
          this.getNoticeList();
          this.getTotle();
          this.getYearTotle();
          this.getMonthTotle();
        }
	}
  const option={
    title: {
    text: '年度信访报表',
   
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '信访案件',
      type: 'pie',
      radius: '50%',
      data: [
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
const option1={
            title: { text: '每月信访统计表' },
            tooltip: {},
            xAxis: {
                data: ["一月","二月","三月","四月","五月","六月",'七月','八月','九月','十月','十一月','十二月']
            },
            yAxis: {},
            series: [{
                name: '月信访总数',
                type: 'bar',
                data: [],
            },
            {
                name: '月归档总数',
                type: 'bar',
                data: [],
            }
            ]
        }
</script>

<style scoped>



</style>